<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>other</title>
</head>
<body>
  <script>
    /**
     *  call apply bind
     *  都为重新指向函数的this
     *  call apply 会直接调用  bind返回重指this的函数
     *  call 入参为一个一个入  apply为数组入参
     *  bind 同 call
     * 
    */

    /**
     *  for of 和 for in的区别
     * 
     *  of 一般遍历数组且得到的是值  in遍历对象得到的是key
     * 
    */

    /**
     *  cookie、sessionStorage和localStorage的异同
     * 
     *  相同点 都是保存在浏览器端、且同源的
     * 
     *  不同点：
     *   1.
     *    cookie数据始终在同源的http请求中携带（即使不需要）
     *    即cookie在浏览器和服务器间来回传递。 
     *    cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。   
     *    sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。
     * 
     *   2.
     *    存储大小限制也不同，
     *    cookie数据不能超过4K，
     *    sessionStorage和localStorage可以达到5M
     * 
     *   3.
     *      sessionStorage：
     *          仅在当前浏览器窗口关闭之前有效；
     *      localStorage：
     *        始终有效，窗口或浏览器关闭也一直保存，本地存储，因此用作持久数据；
     *      cookie：
     *        只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
     *    
     *   4.作用域不同 
     *      sessionStorage：
     *        不在不同的浏览器窗口中共享，即使是同一个页面；
     *      localStorage：
     *        在所有同源窗口中都是共享的；也就是说只要浏览器不关闭，数据仍然存在      
     *      cookie: 
     *        也是在所有同源窗口中都是共享的.也就是说只要浏览器不关闭，数据仍然存在
     *      
    */

    /**
     *  清除浮动的方法?
     *  
     *  overflow：hidden清除浮动的原理是什么。
     *  属于浏览器的一个机制
     *  当一个div中有设置为浮动的元素高度就会塌陷 
     *  如果设置overflow:hidden则全部内容会被隐藏
     *  所以浏览器推出机制
     * 
     * 
     *  clear:both;
     *  原理是这个空的div能让父级获取到高度，
     *  是因为设置之后这个div的左右都不能有浮动元素，
     *  所以这个空的div元素会向下移动，
     *  直到换行，而为了让这个div能够换行，
     *  父元素至少要包含浮动元素的高度才能提高足够的空间，
     *  这样实现清除浮动的影响。
     * 
    */


    /**
      //获取一个变量的具体类型 
      使用 object 上面的 toString 方法

      function typeOf(obj) {
        let res = Object.prototype.toString.call(obj).split(' ')[1]
        res = res.substring(0, res.length - 1).toLowerCase()
        return res
      }      
    */

    /**
      // 数组去重

      // es5
      function unique(arr) {
        return arr.filter((item,key)=>{
          return arr.indexOf(item) === key
        })
      }
    
      // es6
      var unique = arr => [...new Set(arr)]
    */

    /**
      字符串模板
      function render(template, data) {
          const reg = /\{\{(\w+)\}\}/; // 模板字符串正则
          if (reg.test(template)) { // 判断模板里是否有模板字符串
              const name = reg.exec(template)[1]; // 查找当前模板里第一个模板字符串的字段
              template = template.replace(reg, data[name]); // 将第一个模板字符串渲染
              return render(template, data); // 递归的渲染并返回渲染后的结构
          }
          return template; // 如果模板没有模板字符串直接返回
      }
    */
  </script>
</body>
</html>